
<template>
    <main-layout>
        <div class="box">
            <!-- 头部购物车 -->
            <div class="head">
                <p>购物车</p>
            </div>

            <!-- 商品卡片区大容器 -->
            <div class="goods" v-if="cart.length">
                <!-- 每个小卡片 -->
                <div class="card" v-for="it in cart" :key="it.id">
                    <div>
                        <van-checkbox v-model="it.checked" checked-color="#ee0a24" style="color: #333; font-size: 14px">WUWULING</van-checkbox>
                    </div>
                    <van-card :num="it.amount" :price="it.price" desc="描述信息" :title="it.title" :thumb="it.image">
                        <template #footer>
                            <van-button size="mini" @click="btnEvt('minus', it)">-</van-button>
                            <van-button size="mini" @click="btnEvt('add', it)">+</van-button>
                        </template>
                    </van-card>
                </div>
            </div>

            <!-- 购物车为空 -->
            <van-empty v-else class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="购物车为空哟，快点去选购吧"/>

            <!-- 结算组件 -->
            <div class="acount">
                 <div class="l">
                        <van-checkbox v-model="all" checked-color="#ee0a24" style="color: #515151; font-size: 16px">全选</van-checkbox>
                 </div>
                 <div class="r">
                     <p>合计：<span>￥0</span></p>
                     <button @click="accountEvt">结&nbsp;&nbsp;算</button>
                 </div>
            </div>
        </div>
    </main-layout>
           
</template>


<script>

export default ({
  data() {
      return {
          all: false,
          list: []
      }
  },
  methods: {
    accountEvt () {
      // console.log(111)
      this.$router.push('/cartacc')
    },

    btnEvt(type, it) {
        this.list = this.list.map(item => {
            if (it.id === item.id) {
                let nowCount = type === 'add' ? it.amount + 1 : it.amount < 2 ? 1 : it.amount - 1
                item.amount = nowCount
            }
            console.log(list);
            return item
        })
    }
  },

  computed: {
      cart() {
          return this.$store.state.cartModule.cart
      }
  }
})
</script>

<style lang="less" scoped>   
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 100%;
        position: relative;

        .head {
            width: 100%;
            height: 80px;
            background-color: rgba(193, 171, 150, 1);
            padding: 30px;
            box-sizing: border-box;

            p {
                color: #fff;
                font-weight: 800;
                font-size: 20px;

            }
        }

        .goods {
            display: flex;
            flex-direction: column; 
            min-width: 380px;
            flex: 1;


            .card {
                flex: 1;
                flex-wrap: wrap;
                padding: 10px;

            }

            
        }

        .acount {
            position: fixed;
            bottom: 50px;
            left: 0;
            display: flex;
            width: 100%;
            min-width: 340px;
            height: 50px;
            padding: 10px 20px;
            box-sizing: border-box;
            background-color: #fff;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;


            .l {
                // height: 50px;
                flex: 1;
                line-height: 50px;

            }

            .r {
                display: flex;
                // height: 50px;
                // line-height: 50px;
                flex: 1;
                // background-color: rgb(110, 11, 223);

                p {
                    width: 120px;
                    margin: 0;
                    flex: 1;
                    font-size: 14px;

                    span {
                        color: #d1082a;
                    }
                }
                button {
                    width: 120px;
                    flex: 1;
                    border: 0;
                    font-size: 14px;
                    color: #fff;
                    border-radius: 10px;
                    background-color: rgba(223, 71, 11, 0.849);

                }
            }
        }

  
    }

</style>
